<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>干线协调优化平台 - 表格组件</title>
    <link rel="stylesheet" href="../libs/fontawesome/6.7.2/css/all.min.css">
    <link rel="stylesheet" href="../common/base.css">
    <link rel="stylesheet" href="./table_v1.css">
</head>
<body>
    <div class="page-container">
        <!-- 页面标题 -->
        <header class="page-header">
            <h1 class="page-title">
                <i class="fas fa-table"></i>
                表格组件展示
            </h1>
            <p class="page-subtitle">干线协调优化平台 - 数据表格组件库</p>
        </header>

        <!-- 基础数据表格 -->
        <section class="table-section">
            <div class="section-header">
                <h2 class="section-title">
                    <i class="fas fa-chart-line"></i>
                    实时交通数据
                </h2>
                <div class="section-actions">
                    <button class="btn btn-outline">
                        <i class="fas fa-download"></i>
                        导出
                    </button>
                    <button class="btn btn-primary">
                        <i class="fas fa-sync-alt"></i>
                        刷新
                    </button>
                </div>
            </div>
            
            <div class="table-container">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>路口ID</th>
                            <th>路口名称</th>
                            <th>通行状态</th>
                            <th>流量(辆/小时)</th>
                            <th>延误时间(秒)</th>
                            <th>信号配时</th>
                            <th>最后更新</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>JT001</td>
                            <td>解放路-建设街</td>
                            <td><span class="status-badge status-normal">正常</span></td>
                            <td class="number-cell">1,234</td>
                            <td class="number-cell">45</td>
                            <td>90/30/60</td>
                            <td class="time-cell">14:30:22</td>
                            <td class="action-cell">
                                <button class="action-btn view">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="action-btn edit">
                                    <i class="fas fa-edit"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>JT002</td>
                            <td>中山路-人民街</td>
                            <td><span class="status-badge status-warning">拥堵</span></td>
                            <td class="number-cell">2,567</td>
                            <td class="number-cell">128</td>
                            <td>120/45/75</td>
                            <td class="time-cell">14:29:18</td>
                            <td class="action-cell">
                                <button class="action-btn view">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="action-btn edit">
                                    <i class="fas fa-edit"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>JT003</td>
                            <td>北京路-上海街</td>
                            <td><span class="status-badge status-error">故障</span></td>
                            <td class="number-cell">456</td>
                            <td class="number-cell">235</td>
                            <td>60/20/40</td>
                            <td class="time-cell">14:25:07</td>
                            <td class="action-cell">
                                <button class="action-btn view">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="action-btn edit">
                                    <i class="fas fa-edit"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>JT004</td>
                            <td>天津路-南京街</td>
                            <td><span class="status-badge status-normal">正常</span></td>
                            <td class="number-cell">1,891</td>
                            <td class="number-cell">32</td>
                            <td>100/35/65</td>
                            <td class="time-cell">14:30:15</td>
                            <td class="action-cell">
                                <button class="action-btn view">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="action-btn edit">
                                    <i class="fas fa-edit"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>JT005</td>
                            <td>广州路-深圳街</td>
                            <td><span class="status-badge status-success">畅通</span></td>
                            <td class="number-cell">987</td>
                            <td class="number-cell">18</td>
                            <td>80/25/55</td>
                            <td class="time-cell">14:30:09</td>
                            <td class="action-cell">
                                <button class="action-btn view">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="action-btn edit">
                                    <i class="fas fa-edit"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 分页器 -->
            <div class="table-pagination">
                <div class="pagination-info">
                    显示 1-5 条，共 127 条记录
                </div>
                <div class="pagination-controls">
                    <button class="pagination-btn disabled">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button class="pagination-btn active">1</button>
                    <button class="pagination-btn">2</button>
                    <button class="pagination-btn">3</button>
                    <button class="pagination-btn">...</button>
                    <button class="pagination-btn">26</button>
                    <button class="pagination-btn">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
        </section>

        <!-- 统计数据表格 -->
        <section class="table-section">
            <div class="section-header">
                <h2 class="section-title">
                    <i class="fas fa-chart-bar"></i>
                    今日统计数据
                </h2>
            </div>
            
            <div class="table-container compact">
                <table class="stats-table">
                    <thead>
                        <tr>
                            <th>时段</th>
                            <th>总流量</th>
                            <th>平均延误</th>
                            <th>正常路口</th>
                            <th>异常路口</th>
                            <th>效率指数</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="time-period">08:00-09:00</td>
                            <td class="number-cell highlight">15,234</td>
                            <td class="number-cell">68s</td>
                            <td class="number-cell success">145</td>
                            <td class="number-cell error">8</td>
                            <td class="progress-cell">
                                <div class="progress-bar">
                                    <div class="progress-fill" style="width: 85%"></div>
                                </div>
                                <span class="progress-text">85%</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="time-period">09:00-10:00</td>
                            <td class="number-cell highlight">12,567</td>
                            <td class="number-cell">52s</td>
                            <td class="number-cell success">149</td>
                            <td class="number-cell error">4</td>
                            <td class="progress-cell">
                                <div class="progress-bar">
                                    <div class="progress-fill" style="width: 92%"></div>
                                </div>
                                <span class="progress-text">92%</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="time-period">10:00-11:00</td>
                            <td class="number-cell highlight">9,876</td>
                            <td class="number-cell">38s</td>
                            <td class="number-cell success">151</td>
                            <td class="number-cell error">2</td>
                            <td class="progress-cell">
                                <div class="progress-bar">
                                    <div class="progress-fill" style="width: 96%"></div>
                                </div>
                                <span class="progress-text">96%</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
    </div>
</body>
</html>